import {Link} from "react-router";
import {useActionState, useEffect, useState} from "react";

export default function EventTable(){
    const [events, setEvents] = useState([])
    useEffect(()=>{
        getEvents()
    },[])
    async function getEvents(){
        const response = await fetch("http://127.0.0.1:8000/api/v1/events")
        if(response.status===200){
            const body = await response.json()
            setEvents(body.data.events)
        }
    }
    return (
        <table className="w-full border-collapse bg-white rounded-lg shadow-md mb-6">
            <thead>
            <tr className="bg-gray-200">
                <th className="p-4 text-left text-gray-700">Name</th>
                <th className="p-4 text-left text-gray-700">Category</th>
                <th className="p-4 text-left text-gray-700">Time</th>
                <th className="p-4 text-left text-gray-700">Participants</th>
                <th className="p-4 text-left text-gray-700">Comments</th>
                <th className="p-4 text-left text-gray-700">Status</th>
                <th className="p-4 text-left text-gray-700">Actions</th>
            </tr>
            </thead>
            <tbody>
                {events.map(event=>(
            <tr className="border-b">
            <td className="p-4">
                <Link to="/events/1" className="text-blue-500 hover:underline">{event.title}</Link>
            </td>
            <td className="p-4">{event.category}</td>
            <td className="p-4">{event.start_at} - {event.end_at}</td>
            <td className="p-4">
                <div className="flex items-center space-x-2">
                    <div className="relative w-2/3 bg-gray-200 rounded-full h-6 overflow-hidden" role="progressbar"
                         aria-valuenow="5" aria-valuemin="0" aria-valuemax="100" aria-label="Participants progress">
                        <div className="h-6 rounded-l-full w-5/100 bg-[#10b981]"></div>
                    </div>
                    <span className="text-gray-700 text-sm font-semibold" title="5/100 participants">5/100</span>
                </div>
            </td>
            <td className="p-4">10</td>
            <td className="p-4">Active</td>
            <td className="p-4">
                <Link to="/events/edit/1" className="text-blue-500 hover:underline mr-2">Edit</Link>
                <Link to="#" className="text-red-500 hover:underline">Delete</Link>
            </td>
        </tr>                    
                ))}

            </tbody>
        </table>
    )
}